<template>
  <div class="find_talent_home">
    <div class="talent_home_nav">智能匹配达人</div>
    <div class="talent_home_box">
      <div class="have_of_no">
        <div class="have_of_no_left have_of_no_box">
          <div class="left_box">
            <div class="hon_l_text">有商品/对标商品</div>
            <div class="hon_l_btn pub_btn" @click="$router.push('/inAnalysis/SearchGoodsAly01')">找达人</div>
          </div>
        </div>
        <div class="have_of_no_right have_of_no_box">
          <div class="right_box">
            <div class="hon_r_text">无商品/对标商品</div>
            <div class="hon_r_btn pub_btn" @click="NoTalent">找达人</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    NoTalent(){
      if (document.getElementsByClassName("el-message").length === 0) {
        this.$message({
          showClose: true,
          offset: 180,
          message: '敬请期待',
          duration: 2000,
          showClose: false,
        });
      }
    }
  },
  components: {},
};
</script>

<style scoped lang="less">
.find_talent_home {
  padding-top: 14px;
  box-sizing: border-box;
  box-sizing: border-box;
}
.talent_home_nav {
  width: 100%;
  height: 54px;
  line-height: 54px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  font-weight: 600;
  background: url("~@/assets/shi/banner.png") no-repeat;
  background-size: 100% 100%;
}
.talent_home_box {
  width: 100%;
  height: 84vh;
  padding-top: 253px;
  background-color: #fff;
  box-sizing: border-box;
}
.have_of_no {
  width: 812px;
  height: 211px;
  margin: 0 auto;
  position: relative;
}
.have_of_no_box {
  width: 427px;
  height: 100%;
  position: absolute;
  top: 0;
  box-sizing: border-box;
  .right_box{
    text-align: right;
  }
  .hon_l_text{
	font-size: 22px;
    font-weight: 600;
	color: #ffffff;
  }
  .hon_r_text{
	font-size: 22px;
    font-weight: 600;
	color: #ff9c5b;
  }
  .pub_btn{
    width: 106px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin-top: 26px;
    cursor: pointer;
  }
  .hon_l_btn{
    color: #ff9c5b;
    background-color: #fff;
  }
  .hon_r_btn{
    color: #ffffff;
    background-color: #ff9c5b;
  }
}
.have_of_no_left {
  left: 0;
  background: url("~@/assets/shi/talent-have.png") no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  padding-left: 51px;
}
.have_of_no_right {
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  background: url("~@/assets/shi/talent-no.png") no-repeat;
  background-size: contain;
  padding-right: 51px;
}
</style>
